import * as React from 'react'
import classnames from 'classnames'
import { Dispatch } from 'redux'
import { connect } from 'react-redux'
import { RootState } from '@/store/index'
import imgs from '@/assets/imgs/index'
import styles from './index.less'
import VideoContainer from '@components/VideoContainer/index'
import BoxWrapper from './containers/BoxWrapper/index'
import * as CONSTANTS from '@constants/index'
const { useState, useEffect } = React
const Homepage: React.FC = (props: any) => {
  const [ids, setIds] = useState<string[]>(['ad1', 'ad2', 'ad3', 'ad4'])

  useEffect(() => {
    const params = {}
    if ((window as any)._czc) {
      const eventParams: any = [
        "_trackEvent",
        `visit`,
        "load",
        `${new Date()}`,
      ];
      (window as any)._czc.push(eventParams);
    }
    const idsAddon = ids.map((x: string) => x + 'Copy');
    setIds([]);
    setTimeout(() => setIds(idsAddon), 0)
  }, []);

  // const handleEventTrack = (content_name: string = 'MASK') => {
  //   const params = { content_name: 'VIDEO' }
  //   if ((window as any)._czc) {
  //     const eventParams: any = [
  //       '_trackEvent',
  //       `${content_name}`,
  //       '点击',
  //       `${new Date()}`,
  //     ]
  //     ;(window as any)._czc.push(eventParams)
  //   }
  // }

  return (
    <div className={styles.wrapper}>
      <div className={styles.upperWrapper}>
        <img src={imgs.imgTop} className={styles.img} />
      </div>
      
      <BoxWrapper
        wrapperMTop={0}
        width={375}
        height={568}
        bgImg={imgs.animationWrapper}
      >
        <div className={styles.gameWrapper}>
          <VideoContainer
            poster={imgs.poster}
            url={CONSTANTS.URL_VIRUSVIDEO}
            playing={() => {}}
          />
        </div>
      </BoxWrapper>

      {ids.length ? ids.map((compname: string) => (
        <img
          key={compname}
          src={imgs[compname]}
          className={classnames(styles.mid, styles['m-auto'])}
        />
      )):null}

    </div>
  )
}

const mapStateToProps = (state: RootState) => state
const mapDispatchToProps = (dispatch: Dispatch) => ({})

export default connect(mapStateToProps, mapDispatchToProps)(Homepage)
